<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="24">
          <div style="display: flex; justify-content: flex-start;">
            <el-form :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                    v-model="searchData.customName"
                    placeholder="'客户名称'查询"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                    v-model="searchData.planAccTime"
                    type="date"
                    placeholder="计划访问日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button size="mini"
                           type="success"
                           icon="el-icon-search" @click="searchBtn(searchData)">查询
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="mini"
                           type="warning"
                           icon="el-icon-refresh-left" @click="searchRestBtn(searchData)">重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <!--            <el-button-->
          <!--                :loading="downloadLoading"-->
          <!--                size="mini"-->
          <!--                type="warning"-->
          <!--                icon="el-icon-download"-->
          <!--                @click="download">导出-->
          <!--            </el-button>-->
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card>
        <el-table
            :data="tableData"
            max-height="600"
            align="center"
        >
          <el-table-column
              type="index"
              width="50">
          </el-table-column>
          <el-table-column prop="customName" width="130" label="客户名称">
            <template slot-scope="scope">
              <el-popover
                  v-if="scope.row.bankAccessInfo.customName"
                  placement="top-start"
                  title="客户名称"
                  width="300"
                  trigger="hover"
                  :content="scope.row.bankAccessInfo.customName">
                <div style="height: 20px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                     slot="reference">
                  {{ scope.row.bankAccessInfo.customName }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="customAddress" width="120" label="客户地址">
            <template slot-scope="scope">
              <el-popover
                  v-if="scope.row.bankAccessInfo.customAddress"
                  placement="top-start"
                  title="客户地址"
                  width="300"
                  trigger="hover"
                  :content="scope.row.bankAccessInfo.customAddress">
                <div style="height: 20px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                     slot="reference">
                  {{ scope.row.bankAccessInfo.customAddress }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="bankAccPurpose" width="120" label="走访目的">
            <template slot-scope="scope">
              <el-popover
                  v-if="scope.row.bankAccPurpose"
                  placement="top-start"
                  title="走访目的"
                  width="300"
                  trigger="hover"
                  :content="scope.row.bankAccPurpose">
                <div style="height: 20px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                     slot="reference">
                  {{ scope.row.bankAccPurpose }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="bankAccContent" width="120" label="访谈结果">
            <template slot-scope="scope">
              <el-popover
                  v-if="scope.row.bankAccContent"
                  placement="top-start"
                  title="访谈结果"
                  width="300"
                  trigger="hover"
                  :content="scope.row.bankAccContent">
                <div style="height: 20px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                     slot="reference">
                  {{ scope.row.bankAccContent }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="custInfo" width="120" label="客户情况">
            <template slot-scope="scope">
              <el-popover
                  v-if="scope.row.custInfo"
                  placement="top-start"
                  title="客户情况"
                  width="300"
                  trigger="hover"
                  :content="scope.row.custInfo">
                <div style="height: 20px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                     slot="reference">
                  {{ scope.row.custInfo }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="planAccTime" width="120" label="计划访问时间">
            <template slot-scope="scope">
              {{ parseTimeSimple(scope.row.bankAccessInfo.planAccTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="user.userName" width="120" label="创建人"></el-table-column>
          <el-table-column prop="createTime" width="180" label="创建时间"></el-table-column>
          <el-table-column prop="updateTime" width="180" label="变更时间"></el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="180">
            <template slot-scope="scope">
              <el-button
                  type="primary"
                  icon="el-icon-s-management"
                  size="mini"
                  @click="viewDetail(scope.row)"
                  style="width: 120px; margin: 10px"
              >查看详情
              </el-button>
              <el-button size="mini"
                         type="success"
                         icon="el-icon-edit" @click="showEditDialog(scope.row)"
                         style="width: 120px; margin: 10px"
              >修改走访记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
    <el-footer>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.pageNum.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="this.pageNum.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.pageNum.total"
      >
      </el-pagination>
    </el-footer>
    <!-- 删除 -->
    <el-dialog
        title="提示"
        :visible.sync="delDialogVisible"
        width="30%"
    >
      确认删除吗?
      <span slot="footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showDelDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改走访记录弹出框 start -->
    <el-dialog
        title="修改走访记录"
        :visible.sync="editRecordDialogVisible"
        width="50%"
        @close="handleCloseDialog2"
    >
      <el-form
          label-position="left"
          label-width="80px"
          :model="editRecordData"
          :rules="rules2"
          ref="dataForm3"
      >
        <el-form-item label="客户名称" prop="customName">
          <el-input v-model="editRecordData.customName" placeholder="客户名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="走访目的" prop="bankAccPurpose">
          <el-input
              type="textarea"
              placeholder="走访目的"
              v-model="editRecordData.bankAccPurpose"
              maxlength="100"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="访谈结果" prop="bankAccContent">
          <el-input
              type="textarea"
              placeholder="访谈结果"
              v-model="editRecordData.bankAccContent"
              maxlength="100"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="客户情况" prop="custInfo">
          <el-input
              type="textarea"
              placeholder="客户情况"
              v-model="editRecordData.custInfo"
              maxlength="100"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="访问照片">
          <el-upload
              style="float: left"
              :action="baseURL+'/minio/upload'"
              :multiple="true"
              :limit="1"
              :on-preview="handleAccessPhotoPreview"
              :on-success="handleAccessPhotoSuccess"
              :headers="headers"
              :file-list="accessPhotoList"
              :on-remove="handleAccessPhotoRemove"
              :on-exceed="handleAccessPhotoExceed"
              :before-upload="beforeAccessPhotoUpload"
              list-type="picture-card">
            <i class="el-icon-plus"/>
          </el-upload>
          <el-dialog :visible.sync="dialogAccessPhotoVisible" :append-to-body="true">
            <img :src="dialogAccessPhotoUrl" width="100%" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addRecordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddRecordSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增走访记录弹出框 end -->
  </el-container>
</template>

<script>
import axios from "../../utils/axios";
import config from "../../utils/config"
import {parseTimeSimple} from "../../utils/api";

export default {
  name: "BankAccessRecordManager",
  data() {
    return {
      baseURL: '',
      tableData: [],
      pageNum: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      headers: {},
      addDialogVisible: false,
      delDialogVisible: false,
      editDialogVisible: false,
      editRecordDialogVisible: false,
      searchToggle: false,
      downloadLoading: false,
      //删除列表
      delDate: [],
      accessPhotoList: [],// 访问照片
      dialogAccessPhotoVisible: false,
      dialogAccessPhotoUrl: '',// 图片回显地址
      searchData: {
        customName: '',
        planAccTime: null
      },
      editRecordData: {
        bankAccId: null,
        customName: '',
        photoAddress: '',
        bankAccPurpose: '',//走访目的
        bankAccContent: '',//访谈结果
        custInfo: '',//客户情况
      },
      editData: {
        id: null,
        customName: '',
        customAddress: '',
        planAccTime: null,
        remark: ''
      },
      addData: {
        id: null,
        customName: '',
        customAddress: '',
        planAccTime: null,
        remark: ''
      },
      rules: {
        customName: [
          {required: true, message: "客户名称不能为空", trigger: "blur"},
          {max: 30, message: '客户名称不能超过30个字符', trigger: 'blur'}
        ],
        planAccTime: [
          {required: true, message: "计划访问时间不能为空", trigger: "blur"},
        ],
        customAddress: [
          {required: true, message: "客户地址不能为空", trigger: "blur"},
          {max: 100, message: '客户地址不能超过100个字符', trigger: 'blur'}
        ],
        remark: [
          {max: 100, message: '备注不能超过100个字符', trigger: 'blur'}
        ],
      },
      // 新增记录
      rules2: {
        bankAccPurpose: [
          {required: true, message: "走访目的不能为空", trigger: "blur"},
          {max: 100, message: '走访目的不能超过30个字符', trigger: 'blur'}
        ],
        bankAccContent: [
          {required: true, message: "访谈结果不能为空", trigger: "blur"},
          {max: 100, message: '访谈结果不能超过100个字符', trigger: 'blur'}
        ],
        custInfo: [
          {required: true, message: "客户情况不能为空", trigger: "blur"},
          {max: 100, message: '客户情况不能超过100个字符', trigger: 'blur'}
        ],
      }
    };
  },
  created() {
    this.headers.Authorization = localStorage.getItem('token')//token
    this.getList(this.pageNum);
    this.baseURL = config.baseURL
    console.log(this.baseURL)
  },
  methods: {
    parseTimeSimple,
    viewDetail() {
      alert("查看详情")
    },
    //查询菜单
    getList(con) {
      axios({
        method: "GET",
        url: "/bankAccessRecord",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.pageNum.pageNum = res.data.current;
          this.pageNum.pageSize = res.data.size;
          this.pageNum.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 上传之前回调
    beforeAccessPhotoUpload(file) {
      const isIMG =
          file.type === 'image/jpg' ||
          file.type === 'image/jpeg' ||
          file.type === 'image/png'
      if (!isIMG) {
        this.$message.error('上传头像图片只支持jpg、jpeg、png格式!')
      }
      return isIMG
    },
    //照片展示
    handleAccessPhotoPreview(file) {
      this.dialogAccessPhotoVisible = true
      this.dialogAccessPhotoUrl = file.url
    },
    //照片上传成功回调
    handleAccessPhotoSuccess(response, file, fileList) {
      this.dialogAccessPhotoUrl = fileList
      if (response.code == 200) {
        this.editRecordData.photoAddress = response.data.url
      }
      // 将返回的地址赋值给data
      console.log(this.editRecordData)
      // this.addRecordData.photoAddress = response
    },
    //照片删除
    handleAccessPhotoRemove(file, fileList) {
      this.dialogAccessPhotoUrl = fileList
    },
    //照片超出
    handleAccessPhotoExceed() {
      this.$message.error('走访照片只能上传一个')
    },
    handleSizeChange(val) {
      this.pageNum.pageSize = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.pageNum;
        this.searchData.size = this.pageNum.pageSize;
        this.getList(this.searchData);
      } else {
        this.getList(this.pageNum);
      }
    },
    handleCurrentChange(val) {
      this.pageNum.pageNum = val;
      if (this.searchToggle) {// 如果是测试状态，传入的参数是searchData
        this.searchData.current = this.pageNum.pageNum;
        this.searchData.size = this.pageNum.pageSize;
        this.getList(this.searchData);
      } else {// 否则只传递页码
        this.getList(this.pageNum);
      }
    },
    //添加弹出框显示
    showAddDialog() {
      this.addDialogVisible = true;
    },
    //展示添加记录对话框
    showAddRecordDialog(con) {
      this.editRecordDialogVisible = true;
      this.editRecordData.bankAccId = con.id;
      this.editRecordData.customName = con.customName;
    },
    //添加走访记录
    handleAddRecordSubmit() {
      this.$refs.dataForm3.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/bankAccessRecord",
            data: JSON.stringify(this.editRecordData),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.editRecordDialogVisible = false;
              this.getList(this.pageNum);
            } else {
              this.$message.error(res.message);
            }
            this.accessPhotoList = []
          });
        } else {
          this.$message.error("请检查表单");
        }
      });
    },
    //添加提交
    handleAddSubmit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/bankAccessInfo",
            data: JSON.stringify(this.addData),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.addDialogVisible = false;
              this.getList(this.pageNum);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查表单");
        }
      });
    },
    handleCloseDialog() {
      this.addData = {
        id: null,
        customName: '',
        customAddress: '',
        planAccTime: null,
        remark: ''
      }
      //清空提示消息
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate();
      })
    },
    handleCloseDialog2() {
      //清空提示消息
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate();
      })
    },
    handleCloseDialog3() {
      //清空图片列表
      this.accessPhotoList = []
      //清空提示消息
      this.$nextTick(() => {
        this.$refs['dataForm3'].clearValidate();
      })
    },
    //查询
    searchBtn(con) {
      this.getList(con);
      this.searchToggle = true;
    },
    //导出
    download() {
      this.downloadLoading = true
    },
    //重置
    searchRestBtn(con) {
      this.searchData.customName = null;
      this.searchData.planAccTime = null;
      this.getList(con);
      this.searchToggle = false;
    },
    //删除
    handleDelete(con) {
      this.delDialogVisible = true;
      this.delDate = [];
      this.delDate.push(con);
    },

    //删除对话框
    showDelDialog() {
      axios({
        method: "DELETE",
        url: "/bankAccessInfo",
        data: JSON.stringify(this.delDate),
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.delDialogVisible = false;
          this.getList(this.searchData);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //弹出修改对话框
    showEditDialog(con) {
      this.editRecordDialogVisible = true;
      this.editData.id = con.id;
      this.editData.customName = con.customName;
      this.editData.customAddress = con.customAddress;
      this.editData.planAccTime = con.planAccTime;
      this.editData.remark = con.remark;
    },
    //修改提交
    handleEditSubmit() {
      this.$refs.dataForm2.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/bankAccessInfo",
            data: this.editData,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.editDialogVisible = false;
              this.getList(this.pageNum);
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查表单");
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.datepicker {
  float: left;
  width: 50%;
}
</style>


